import "package:flutter/material.dart";
import "dart:math" as math;

// 顶部状态栏+导航栏
class HeaderBarWidget extends StatefulWidget {
  final ScrollController controller;
  const HeaderBarWidget({
    super.key,
    required this.controller,
  });
  @override
  State<StatefulWidget> createState() {
    return _HeaderBarWidgetState();
  }
}

class _HeaderBarWidgetState extends State<HeaderBarWidget> {
  double opacity = 0; //导航栏透明度
  double tabHeight = 50;
  double statusHeight = 34;
  double offset = 0; //滚动距离
  bool isShowTabSearchBar = false; //是否显示导航栏的搜索框

  @override
  void initState() {
    widget.controller.addListener(() {
      offset = widget.controller.offset;
      setState(() {
        opacity = math.min(tabHeight, offset) / tabHeight; //0-1
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: double.infinity,
          decoration: BoxDecoration(
            color: const Color.fromRGBO(33, 124, 243, 0.9),
            image: DecorationImage(
              image: const AssetImage("./images/3.jpg"),
              fit: BoxFit.fitWidth,
              alignment: Alignment.topCenter,
              opacity: opacity * 0.2,
            ),
          ),
          alignment: Alignment.center,
          child: Column(
            children: [
              SizedBox(height: statusHeight),
              Container(
                width: double.infinity,
                height: tabHeight,
                padding: const EdgeInsets.only(left: 14, right: 14),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    const Expanded(
                      flex: 1,
                      child: Row(
                        children: [
                          Padding(
                            padding: EdgeInsets.only(right: 8),
                            child: Text(
                              '会员购',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 17,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                          Row(
                            children: [
                              SizedBox(
                                width: 70,
                                child: Text(
                                  '内购群限时开放',
                                  maxLines: 1,
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 13,
                                  ),
                                ),
                              ),
                              Icon(
                                Icons.keyboard_arrow_right_outlined,
                                size: 18,
                                color: Colors.white,
                              )
                            ],
                          ),
                        ],
                      ),
                    ),
                    Row(
                      children: [
                        const Padding(
                          padding: EdgeInsets.only(left: 18),
                          child: Icon(
                            Icons.mail,
                            color: Colors.white,
                            size: 22,
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(left: 18),
                          child: Stack(
                            clipBehavior: Clip.none, //超出不被裁剪
                            children: [
                              const Icon(
                                Icons.shopping_cart_outlined,
                                color: Colors.white,
                                size: 22,
                              ),
                              Positioned(
                                top: -13,
                                right: -4,
                                child: Container(
                                  width: 15,
                                  height: 15,
                                  decoration: BoxDecoration(
                                    border: Border.all(
                                      color: Colors.white,
                                      width: 1.2,
                                    ),
                                    borderRadius: BorderRadius.circular(10),
                                  ),
                                  alignment: Alignment.center,
                                  child: const Text(
                                    '2',
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 10,
                                      height: 1,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        const Padding(
                          padding: EdgeInsets.only(left: 18),
                          child: Icon(
                            Icons.account_circle_outlined,
                            color: Colors.white,
                            size: 22,
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}
